<template>
  <div class="chart_box">
    <!-- 教师图表记录 -->
    <div class="teacher_chart">
      总体识别图
      <div ref="chart1" id="chart1"></div>
      教师入职趋势图
      <div ref="chart2" id="chart2"></div>
      教师职称图
      <div ref="chart3" id="chart3"></div>
    </div>

    <!-- 学生图表记录 -->
    <div class="student_chart">
      七天识别图
      <div ref="stu_chart1" id="stu_chart1"></div>
      学生入学趋势图
      <div ref="stu_chart2" id="stu_chart2"></div>
      学生年级分布图
      <div ref="stu_chart3" id="stu_chart3"></div>
    </div>

  </div>
</template>
<script>
import { Pie, Column, Line } from '@antv/g2plot'
import { get } from '@/utils/request.js'
export default {
  data() {
    return {
      chart1Data: [{name: '识别成功', value: 10},{name: '识别失败', value: 0}],
      chart2Data: [{name: '教授', value: 10},{name: '副教授', value: 8},{name: '讲师', value: 22}],
      chart3Data: [{name: '一年级', value: 10},{name: '二年级', value: 12},{name: '三年级', value: 8},{name: '四年级', value: 25},{name: '五年级', value: 16},],
      stu1Data: [{name: '一年级', value: 10},{name: '二年级', value: 12},{name: '三年级', value: 8},{name: '四年级', value: 25},{name: '五年级', value: 16},],
      stu2Data: [{name: '一年级', value: 10},{name: '二年级', value: 12},{name: '三年级', value: 8},{name: '四年级', value: 25},{name: '五年级', value: 16},],
      stu3Data: [{name: '一年级', value: 10},{name: '二年级', value: 12},{name: '三年级', value: 8},{name: '四年级', value: 25},{name: '五年级', value: 16},],
    }
  },
  methods: {
    // 获取总识别结果数据
    async getRecognitionData() {
      const res = await get('/face/chart/face_recognition_total_stats/')
        // console.log(res.data)
      this.chart1Data = res.data
    },
    // 获取教师入职趋势
    async getTeacherData() {
      const res = await get('/face/chart/teacher_hire_trend/')
      console.log(res.data);
      this.chart2Data = res.data
    },
    // 获取不同职称教师数量
    async getDefTeacher(){
      const res = await get('/face/chart/teacher_title_count/')
      this.chart3Data = res.data
    },

    // 获取近7天识别结果
    async getRecognitionData7() {
      const res = await get('/face/chart/face_recognition_weekly_stats/')
      this.stu1Data = res.data
    },

    //获取学生入学趋势
    async getStudentData(){
      const res = await get('/face/chart/student_enrollment_trend/')
      this.stu2Data = res.data
    },

    //获取不同年纪学生数量
    async getDefStudentData(){
      const res = await get('/face/chart/grade_wise_student_count/')
      this.stu3Data = res.data
    },

    // 渲染饼图的方法
    renderPieChart(id, data) {
      const piePlot = new Pie(id, {
        data:data,
        title: {
          visible: true,
          text: '总识别图',
        },
        radius: 0.8,
        angleField: 'value',
        colorField: 'name',
        label: {
          visible: true,
          type: 'inner',
        },
      });
      piePlot.render();
    },
    // 渲染柱状图的方法
    renderColumnChart(id, data) {
      const columnPlot = new Column(id, {
        title: {
          visible: true,
          text: '基础柱状图',
        },
        forceFit: true,
        data:data,
        padding: 'auto',
        xField: 'name',
        yField: 'value',
        meta: {
          name: {
            alias: '年级',
          },
          sales: {
            alias: '学生数(人)',
          },
        },
      });

      columnPlot.render();
    },
    // 渲染折线图的方法
    renderLineChart(id,data) {
      const linePlot = new Line(id, {
        title: {
          visible: true,
          text: '带标注点的折线图',
        },
        description: {
          visible: true,
          text: '在折线图上标注重点的数据，如节假日等',
        },
        forceFit: true,
        padding: 'auto',
        data:data,
        xField: 'year',
        yField: 'count',
        yAxis: {
          nice: true,
        },
        label: {
          visible: false,
        },
        // 标记位置
        markerPoints: [
          {
            visible: true,
            data: [{ name: '2019-05-01', value: 4.9 }, { name: '2019-10-01' }],
            label: {
              visible: true,
              field: 'festival',
            },
          },
        ],
      });

      linePlot.render();
    }
  },

  mounted() {
    this.getRecognitionData()
    this.getTeacherData()
    this.getDefTeacher()
    this.getRecognitionData7()
    this.getStudentData()
    this.getDefStudentData()
  },
  watch: {
    chart1Data:{
      deep:true,
      handler(){
        this.renderPieChart(this.$refs.chart1,this.chart1Data)
      }
    },
    chart2Data:{
      deep:true,
      handler(){
        this.renderLineChart(this.$refs.chart2,this.chart2Data)
      }
    },
    chart3Data:{
      deep:true,
      handler(){
        this.renderColumnChart(this.$refs.chart3,this.chart3Data)
      }
    },
    stu1Data:{
      deep:true,
      handler(){
        this.renderPieChart(this.$refs.stu_chart1,this.stu1Data)
      }
    },
    stu2Data:{
      deep:true,
      handler(){
        this.renderLineChart(this.$refs.stu_chart2,this.stu2Data)
      }
    },
    stu3Data:{
      deep:true,
      handler(){
        this.renderColumnChart(this.$refs.stu_chart3,this.stu3Data)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.teacher_chart {
  display: flex;
  justify-content: space-around;
  align-items: center;
  #chart1 {
    width: 400px;
    height: 400px;
  }
  #chart2 {
    width: 400px;
    height: 400px;
  }
  #chart3 {
    width: 400px;
    height: 400px;
  }
}

.student_chart {
  display: flex;
  justify-content: space-around;
  align-items: center;
  #stu_chart1 {
    width: 400px;
    height: 400px;
  }
  #stu_chart2 {
    width: 400px;
    height: 400px;
  }
  #stu_chart3 {
    width: 400px;
    height: 400px;
  }
}
</style>